<template>
    <div class="population-migration population-page">
      <div class="h100" ref="chart"></div>
    </div>
</template>
<script>

import * as echarts from 'echarts'
import tangJson from '@/data/tang.json';

import { poetCountLoacle } from '@/api/poet-api'

export default {
  name: 'PopulationMigration',
  data() {
    return {
        birthList: [],
        deathList: [],
    }
  },
  mounted(){
    this.getData()
  },
  methods: {
    getData(){
        poetCountLoacle({size: 5}).then(res => {
            console.log(res);
            if (res.code === '200') {
                this.birthList = res.data.birth
                this.deathList = res.data.death
                this.initChart()
            }
        })
    },
    initChart(){      
      echarts.registerMap('tang', tangJson)
      const chartInstance = echarts.init(this.$refs.chart)

      var allData = {
        "cities": [
            {
                "name": "平樂",
                "value": [
                    110.634869,
                    24.642347,
                    0,
                    12
                ],
                "itemStyle": {
                  "color": "#F58158"
                },
                "symbolSize": 0
            },
            {
                "name": "洛陽",
                "value": [
                    112.38263,
                    34.665276,
                    166,
                    165
                ],
                "itemStyle": {
                  "color": "#58B3CC"
                },
                "symbolSize": 17
            },
            {
                "name": "北市",
                "value": [
                    112.3826,
                    34.66528,
                    7,
                    135
                ],
                "itemStyle": {
                    "color": "#F58158"
                },
                "symbolSize": 17
            },
          ]
      }

      const data = [
        {
          "name": "芒山",
              "value": 396
        },
        {
            "name": "洛陽",
            "value": 165
        }
      ]
    //   let deathplaceNameList = data.slice(0, 5).map(function (item) {
    //       return item.name;
    //   });
    const birthDataList = this.birthList.map(e =>  ({'name': e.locale, 'value': e.number}))
    const birthNameList = this.birthList.map(e =>  e.locale)
    const deathDataList = this.deathList.map(e =>  ({'name': e.locale, 'value': e.number}))
    const deathNameList = this.deathList.map(e =>  e.locale)

      var options = {
            title: {
                text: '唐代人物迁徙图',
                subtext: '地图：Tang Empire 741, using the Cambridge History of China',
                target: "blank", //'self' 当前窗口打开，'blank' 新窗口打开
                padding: 5, // 标题内边距 5  [5, 10]  [5,10,5,10]
                top: '52%',
                left: '3%',
                x: 'center',
                right: "auto", // 组件离容器右侧的距离,'20%'
                bottom: "auto", // 组件离容器下侧的距离,'20%'
                textStyle: {
                    color: "black", //文字颜色
                    fontStyle: "normal", // italic斜体  oblique倾斜
                    fontWeight: "bold", // 文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
                    fontFamily: "KaiTi, serif", // 字体系列
                    fontSize: 28, // 字体大小
                }
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: [{
                top: '40%',
                width: '20%',
                bottom: '45%',
                right: '5%',
                containLabel: true
            },
            {
                top: '65%',
                width: '20%',
                bottom: '20%',
                right: '4%',
                containLabel: true
            }],
            legend: {
                show: true,
                orient: 'vertical',
                top: '66%',
                left: '2%',
                data: ['地点（橙色表示死亡人数>出生人数，蓝色反之）', '迁徙路线（生地->卒地)'],
                textStyle: {
                    color: '#274d3d',
                    fontFamily: 'Kaiti',
                    fontSize: 16 // 字体大小
                }
            },
            geo: {
                show: true, // 是否显示
                map: 'tang',
                // 其他配置项
                silent:false,//决定地图上是否触发事件。如果设置为true，它将不会响应用户交互。
                label: {
                    emphasis: {// 是否在高亮状态下显示标签。(省份名称)
                        show: true,
                        color: '#FFFFFF', // 文字设置
                        fontFamily: 'monospace'
                    }
                },
                center: [110.97, 34.01],
                roam: true, // 是否开启鼠标缩放和平移漫游。
                zlevel: -10,
                z: 0,
                zoom: 0,// 指定地图的初始缩放级别
                itemStyle: {// 地图板块区域的多边形 图形样式
                    // 默认板块信息
                    areaColor: '#323c48',// 地图区域的填充颜色
                    borderColor: '#d3d7d4', // 地图区域的边框颜色
                    emphasis: {// 高亮版板块信息
                        areaColor: '#6e87a4',// 突出显示区域时填充颜色
                        opacity: '90%'// 突出显示区域的不透明度
                    }
                },
            },
            series: [
                {
                    name: '地点（橙色表示死亡人数>出生人数，蓝色反之）',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    zlevel: 30,
                    symbolSize: 2,
                    showEffectOn: 'render',
                    label: {
                        show: false,                  //默认情况下不显示标签
                        position: "right",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
                        // offset: [30, 40],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
                        formatter: function (params) {//标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
                            if(params.value[3] >= 10 || params.value[2] >= 10 )
                                return params.name + ': ' + params.value[3] + '人/' + params.value[2] + '人';
                            else return ' ';
                        },
                        emphasis: {
                            show: true,                    //鼠标悬停时是否显示标签
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    itemStyle: {
                        color: '#F58158',
                        fontFamily: 'Kaiti'
                    },
                    data: allData.cities
                },
                {
                    name: '迁徙路线（生地->卒地)',
                    type: 'lines',
                    coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
                    large: true, // 是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。
                    label: {
                      show: true,
                      position: 'right', //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
                      formatter: '{b}' //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
                        
                    },
                    zlevel: 1,
                    effect: {
                        show: true,
                        constantSpeed: 30, // 点移动的速度
                        symbol: 'pin',  // 图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                        symbolSize: 3, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                        trailLength: 0, // 线的宽度
                    },
                    lineStyle: { // 线的颜色、宽度，样式设置
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: '#58B3CC'
                            }, {
                                offset: 1, color: '#F58158'
                            }], false),
                            width: 1, // 线的宽度
                            opacity: 0.2, // 线的透明度
                            curveness: 0.1 // 线的完全程度
                        }
                    },
                    data: allData.moveLines
                },   
                {
                    name: {
                        text: '卒地排名',
                        textStyle: {
                            color: '#b4534b', // Specify the color you want
                            fontSize: 200,
                        }
                    },
                    type: 'bar',
                    stack: 'one',
                    itemStyle: {
                      color: '#F58158',
                      fontSize: 16,
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'right',
                            textStyle: {
                                color: '#b4534b', // Specify the color you want for the labels
                                fontSize: 16,  // 设置条形图上标签的字体大小
                            }
                        },
                        emphasis: {
                            show: true,
                            formatter: '{c}',
                            position: 'right',
                            textStyle: {
                                color: '#b4534b', // Specify the color you want for the labels
                                fontSize: 16,  // 设置条形图上标签的字体大小

                            }
                        }
                    },
                    data: birthDataList
                },
                {
                    name: {
                        text: '生地排名',
                        textStyle: {
                            color: '#58B3CC' // Specify the color you want
                        }
                    },
                    type: 'bar',
                    itemStyle: {
                      color: '#58B3CC'
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'right'
                        },
                        emphasis: {
                            show: true,
                            position: 'right',
                            formatter: '{c}人'
                        }
                    },
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: deathDataList
                }
            ],
            yAxis: [{
                data: deathNameList,
                show: true,
                inverse: true,
                name: '卒地排名',
                nameTextStyle: {
                    fontSize: 22,  // 设置坐标轴标题的字体大小
                    fontFamily: 'Kaiti'
                },
                nameLocation: 'start',
                axisLine: { show: false, lineStyle: { color: '#b4534b' } },
                axisTick: { show: false, lineStyle: { color: '#b4534b' } },
                axisLabel: { interval: 0, textStyle: { color: '#b4534b', fontSize: 16, fontFamily: 'Kaiti' } },
                gridIndex: 0
            },
            {
                data: birthNameList,
                show: true,
                inverse: true,
                name: '生地排名',
                nameTextStyle: {
                    fontSize: 22,  // 设置坐标轴标题的字体大小
                    fontFamily: 'Kaiti'
                },
                nameLocation: 'start',
                axisLine: { show: false, lineStyle: { color: '#58B3CC' } },
                axisTick: { show: false, lineStyle: { color: '#58B3CC' } },
                axisLabel: { interval: 0, textStyle: { color: '#58B3CC', fontSize: 16, fontFamily: 'Kaiti' } }, //列标签
                gridIndex: 1,

            }],
            xAxis: [{
                inverse: false,
                position: 'bottom',
                min: 0, max: 400,
                splitLine: { show: false },
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false }
            },
            {
                inverse: false,
                position: 'bottom',
                splitLine: { show: false },
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                gridIndex: 1, min: 0, max: 400,
            }
            ]
      };
      chartInstance.setOption(options);
    }
  }
}
</script>
<style lang="scss" scoped>
.population-migration {
  height: calc(100vh - 60px);
}
</style>